import React, { Suspense, lazy } from 'react'
import { Link, Routes, Route } from "react-router-dom"

const Home = lazy(() => import(/* webpackChunkName: 'home' */ './pages/Home'))
const About = lazy(() => import(/* webpackChunkName: 'about' */ './pages/About'))
const Login = lazy(() => import(/* webpackChunkName: 'about' */ './pages/Login'))
const Life = lazy(() => import(/* webpackChunkName: 'about' */ './pages/Life'))

const p = {
	name: 'tom',
	age: 10
}

function App() {
	return (
		<div>
			<h1>App</h1>
			<ul>
				<li>
					<Link to="/home">Home</Link>
				</li>
				<li>
					<Link to="/about">about</Link>
				</li>
				<li>
					<Link to="/login">login</Link>
				</li>
				<li>
					<Link to="/life">life</Link>
				</li>
			</ul>
			
			<Suspense fallback={ <div>loading...</div> }>
				<Routes>
					<Route path="/home" element={ <Home /> }/>
					<Route path="/login" element={ <Login /> }/>
					<Route path="/about" element={ <About {...p} /> }/>
					<Route path="/life" element={ <Life /> }/>
				</Routes>
			</Suspense>
			
		</div>
	)
}

export default App
